<!-- 购物车控制 ( - num + ) 组件 -->

<template>
  <div>

    <div class="cart-control" v-if="food.isSellAll== 0">
      <div class="logo-wrapper" v-show="showcontrol" @click="showdialog">
        <div class="logo">
          <i class="iconfont icon-cart"></i>
        </div>
        <div class="totalCount" v-show="totalCount>0">{{totalCount}}</div>
      </div>
      <div v-show="!showcontrol">

        <transition name="move">
          <div class="logo-wrapper" v-show="itemNum > 0" @click="subtract($event)">
            <div class="logo" style="z-index:50;">
              <i class="iconfont icon-subtract"></i>
            </div>
          </div>
        </transition>

        <div class="num" v-show="itemNum> 0">{{ itemNum }}</div>

        <div class="logo-wrapper" @click="add($event)">
          <div class="logo" style="z-index:50;">
            <i class="iconfont icon-add"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="isSellAll" v-if="food.isSellAll== 1">

      <span>已售磬</span>

    </div>

    <div v-transfer-dom>

      <x-dialog v-model="dialog" hide-on-blur class="dialog">
        <div @click="dialog=false" class="pull-right">
          <span class="vux-close"></span>
        </div>
        <!-- 头部文字 -->
        <div class="title">
          <span>{{food.name}}</span>
        </div>

        <!-- 规格 -->

        <div class="list-content">
          <div class="panel">
            <span>规格</span>
          </div>
          <!-- 规格内容 -->
          <div class="panel-content">

            <checker v-model="radiogg" default-item-class="radio-item" selected-item-class="radio-item-selected" radio-required @on-change="changegg">
              <checker-item v-for="item in food.specs" :key="item.foodId" :value="item"> {{item.name}}</checker-item>
            </checker>

          </div>
        </div>
        <!-- 属性 -->
        <div v-for="(item,index) in leixs" :key="item">
          <div class="panel">
            <span>{{item}}</span>
          </div>
          <!-- 属性内容 -->
          <div class="panel-content">

            <checker v-model="radiosx[index]" default-item-class="radio-item" selected-item-class="radio-item-selected" radio-required @on-change="changesx">
              <checker-item v-for="itemd in food.attributes" v-if="item==itemd.typeName" :checked="itemd.mor == 1" :key="itemd.id" :value="itemd"> {{itemd.name}}</checker-item>
            </checker>
          </div>

        </div>

        <!-- 操作 -->
        <div class="foot ">
          <span class="footdec">{{msgpriec+msgdec}}</span>

          <div class="pull-right cart-control " style="padding-right:10px;">
            <div class="logo-wrapper" v-show="itemNum > 0">
              <div class="logo" @click="subtract($event)">
                <i class="iconfont icon-subtract"></i>
              </div>
            </div>

            <span class="num" v-show="itemNum > 0">{{itemNum}}</span>

            <div class="logo-wrapper">
              <div class="logo" @click="add($event)">
                <i class="iconfont icon-add"></i>
              </div>
            </div>
          </div>

        </div>

      </x-dialog>
    </div>

  </div>
</template>

<script>
import Vue from "vue";

import {
  XDialog,
  ViewBox,
  Checker,
  CheckerItem,
  TransferDomDirective as TransferDom
} from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    XDialog,
    Checker,
    CheckerItem,
    ViewBox
  },
  data() {
    return {
      dialog: false,
      radiogg: 0,
      radiosx: [],
      msgpriec: "",
      msgdec: "",
      beiz: ""
    };
  },
  props: {
    // 操作哪个商品
    food: {
      type: Object
    },
    // 加入购物车的商品
    cartdata: {
      type: Object
    },
    control: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  watch: {},
  methods: {
    decrease(event) {},

    add(event) {
      //获取id,判断是否已经保存过了

      var _ggid, _ggname, _ggdj, _ggzk, _ggydj, _sxids;

      _ggname = this.radiogg.name;
      _ggdj = this.radiogg.price;
      _ggydj = this.radiogg.oldPrice;
      _ggzk = this.radiogg.discount;
      var _beiz, _beiz1;
      _beiz = this.getRadiosxName();
      _sxids = this.getRadiosxId();
      _beiz1 = this.beiz;
    
      this.$emit(
        "addCart",
        event.target,
        0,
        this.food.id,
        this.radiogg.foodId,
        this.food.isTaoc,
        this.food.name,
        _ggname,
        this.food.unit,
        _ggdj,
        _ggzk,
        _ggydj,
        _sxids,
        _beiz,
        _beiz1
      );
    },
    subtract(event) {
      var _sxids;
      // _beiz = this.radiosx.join();
      _sxids = this.getRadiosxId();
      this.$emit("subtractCart", 0, this.radiogg.foodId, _sxids);
    },
    showdialog() {
      this.dialog = true;
    },
    closedialog() {
      this.dialog = false;
    },
    addmsg() {
      this.food.specs.forEach(item => {
        if (item.foodId == this.radiogg.foodId) {
          this.msgpriec = "￥" + item.price + "/" + item.name;
          if (this.radiosx.length > 0) {
            this.msgdec = "(" + this.getRadiosxName() + ")";
          }
        }
      });
    },
    changegg(value) {
      this.addmsg();
    },
    changesx(value) {
      this.addmsg();
    },
    setMor() {
      this.radiogg = this.food.specs[0];
      this.radiosx = [];
    },
    getRadiosxName() {
      var _beiz = "";
      this.radiosx.forEach((item, index) => {
        if (index == 0) {
          _beiz = item.name;
        } else {
          _beiz += "," + item.name;
        }
      });
      return _beiz;
    },
    getRadiosxId() {
      var _sxids = "";
      this.radiosx.forEach((item, index) => {
        if (index == 0) {
          _sxids = item.id;
        } else {
          _sxids += "," + item.id;
        }
      });
      return _sxids;
    }
  },
  computed: {
    leixs() {
      var leix = [];
      var mr = [];
      this.food.attributes.forEach((item, index) => {
        if (leix.indexOf(item.typeName) < 0) {
          leix.push(item.typeName);
        }
        if (mr[leix.length - 1] == null || item.mor == 1) {
          mr[leix.length - 1] = item;
        }
      });
      if (this.radiogg == 0) {
        this.radiogg = this.food.specs[0];
      }
      mr.forEach((item, index) => {
        if (this.radiosx[index] == null) {
          this.radiosx[index] = item;
        }
      });
      this.addmsg();
      return leix;
    },
    itemNum() {
      var num = 0;
      let key = this.radiogg.foodId + this.getRadiosxId();
      if (this.cartdata.hasOwnProperty(key)) {
        num = this.cartdata[key].shul;
      }
      return num;
    },
    totalCount() {
      var total = 0;
      Object.values(this.cartdata).forEach(mx => {
        if (mx.bcaipId == this.food.id) {
          total += parseFloat(mx.shul);
        }
      });
      return total;
    },
    showcontrol() {
      if (this.control == false) {
        return false;
      } else {
        if (
          (this.food.attributes == null || this.food.attributes.length <= 1) &&
          this.food.specs.length == 1
        ) {
          return false;
        } else {
          return true;
        }
      }
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.dialog {
  margin-left: 1px;
  .close {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .title {
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
  }
  .panel {
    height: 20px;
    text-align: left;
    padding-left: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 10px;
    color: rgb(0, 0, 0);
  }
  .panel-content {
    text-align: left;
    padding-left: 10px;
    padding-bottom: 20px;
    font-size: 14px;
  }

  .radio-item {
    min-width: 50px;
    height: 24px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid rgb(222, 247, 255);
    background-color: #fff;
    margin-right: 6px;
  }
  .radio-item-selected {
    // background: #ffffff url(../../assets/img/active.png) no-repeat right bottom;
    border-color: #ff4a00;
  }
  .foot {
    padding-bottom: 20px;
    padding-left: 20px;
    text-align: left;
  }
  .footdec {
    color: #ff2a00;
    font-size: 14px;
  }
}

.cart-control {
  font-size: 0;
  .decrease,
  .add {
    display: inline-block;
    font-size: 20px;
    background-color: #ffa500;
    border-radius: 100%;
    i {
      color: #ffffff;
      font-size: 20px;
      display: inline-block;
    }
  }
  .num {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 20px;
    text-align: center;
    color: rgb(50, 51, 51);
    vertical-align: top;
  }
  .isSellAll {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    margin-left: 3px;
    padding: 3px;
    width: 40px;
    height: 40px;
    vertical-align: top;
    text-align: center;
    color: #000000;
  }
  .logo-wrapper {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    // margin-left: 3px;
    padding: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    // vertical-align: top;
    text-align: center;
    .logo {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #ffa500;
      i {
        font-size: 22px;
        line-height: 26px;
        color: #ffffff;
      }
    }
    .totalCount {
      position: absolute;
      right: 0;
      top: 0;
      width: 18px;
      height: 14px;
      line-height: 12px;
      border-radius: 20px 20px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background-color: rgb(240, 20, 20);
    }
  }
}
</style>
